<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		var states = new Array('0','0','0','0','0','0');
		//0 available    1 occupied    2 booked(on the way) 3 unexpected(need to check)
		var closest = new Array(5,0,4,1,3,2);
		var spaces=6;//how many parking Spaces are there 

		var ip = "192.168.1.100";
		var port = "8002";
		var ws = new WebSocket("ws://" + ip + ":" + port + "/echo");
		ws.onopen = function () {

		}
		ws.onmessage = function (evt) {
			received_msg = evt.data;
			if(received_msg=="r"){//request a parking lot
				let found=0;
				for(let i=0;i<spaces;i++){
					if(states[closest[i]]=='0'){
						ws.send(closest[i]);
						states[closest[i]]='2';
						$(".no_" + closest[i]).attr("class", "light no_" + closest[i] + " booked");
						$(".no_" + closest[i]).html("Booked<br />just now");
						found=1;
						break;
					}
				}
				if(found==0){
					ws.send("-1");
				}
			}else{
				let num = received_msg[0];
				received_msg=received_msg.replace(num, "");
				if(num=='+')num=0;
				console.log("freshed" + received_msg);
				if (parseInt(received_msg) > 500) {
					if(states[num] == '0'){//still empty Space
						$(".no_" + num).attr("class", "light no_" + num + " available");
						$(".no_" + num).html("Available<br />"+received_msg);
						states[num]='0';
					}else if(states[num] == '1'){//a car left
						$(".no_" + num).attr("class", "light no_" + num + " available");
						$(".no_" + num).html("CAR left<br />just now");
						states[num]='0';
					}else if(states[num] == '2'){//this apace is booked by a coming car
						$(".no_" + num).attr("class", "light no_" + num + " booked");
						$(".no_" + num).html("Booked<br />waiting");
					}else if(states[num] == '3'){
						$(".no_" + num).attr("class", "light no_" + num + " Exception_eliminated");
						$(".no_" + num).html("Exception<br />eliminated");
						states[num]='0';
					}
				} else if (parseInt(received_msg) <= 500) {
					if(states[num] == '2'){//the booked car arrived
						$(".no_" + num).attr("class", "light no_" + num + " occupied");
						$(".no_" + num).html("arrived<br />just now");
						states[num]='1';
					}else if(states[num] == '1'){//here is still an occupied Space
						$(".no_" + num).attr("class", "light no_" + num + " occupied");
						$(".no_" + num).html("Occupied<br />"+received_msg);
						states[num]='1';
					}else if(states[num] == '0'){//something is there without booked
						$(".no_" + num).attr("class", "light no_" + num + " exception");
						$(".no_" + num).html("Exception<br />"+received_msg);
						states[num]='3';
					}//if it is an exception still remain an exception
				}
			}
		};
	</script>
	<style>
		.light {
			margin-left: 25px;
			margin-top: 25px;
			display: inline-block;
			border: solid black 1px;
			width: 100px;
			height: 160px;
			text-align: center;
			line-height: 80px;
			font-size: 20px;
			font-weight: 900;
		}

		.occupied {
			background-color: skyblue;
			color: rgb(110, 0, 212);
		}

		.booked{
			background-color: skyblue;
			color: khaki;
		}

		.unknown {
			background-color: black;
			color: white;
		}

		.available {
			background-color: greenyellow;
			color: white;
		}

		.exception {
			background-color: orangered;
			color: white;
			font-size: 15px;
		}

		.Exception_eliminated{
			background-color: greenyellow;
			color: green;
			font-size: 15px;
		}
	</style>
	<title>Parking Lot</title>
</head>

<body>
	<h1>Parking Lot System</h1>
	<div class="light no_0 unknown">unknown<br />????</div>
	<div class="light no_1 unknown">unknown<br />????</div>
	<div class="light no_2 unknown">unknown<br />????</div>
	<div class="light no_3 unknown">unknown<br />????</div>
	<div class="light no_4 unknown">unknown<br />????</div>
	<div class="light no_5 unknown">unknown<br />????</div>
</body>

</html>